<template>
<div id="weekly">
    <span class='date'>{{ start }} ~ {{ end  }}</span>
    <section class="star-wrapper">
        <div class="star">       
            <p>本周获得 {{star == 0 ? 0 :star}} 颗星</p>
                <!-- 星星等级 -->
            <div class="starwrapper clearfix" id="star1">       
                   <i class="kongxin" id='kongxing' :style="'background-image: url('+$qiniu.url+'assets/img/starjianshen2.png)'"></i>      
                   <i class="shixin" id='shixing' :style="'background-image: url('+$qiniu.url+'assets/img/starjianshen.png)'"></i>   
                   <i class="wrapperstar" id='wrapperstar'></i>    
            </div>
            <p v-if="parseInt(star) == 5">真厉害！本周成绩出众，继续努力</p>
            <p v-else-if="parseInt(star) == 4 || parseInt(star) == 3">本周成绩出众，继续努力</p>
            <p v-else>继续努力</p>
        </div>
    </section>
    <div class="title">— 健身数据 —</div>
    <section class="fit-wrapper"  v-if="weekly !== null">
        <div class="fit-data clearfix">
            <div class="data">
                <i class="icon kcal"
                :style="'background-image: url('+$qiniu.url+'assets/img/icon.png)'"></i>
                <p>消耗/千卡</p>
                <p>{{weekly.totalKcal == null ? 0 : weekly.totalKcal}}</p>
            </div>
            <div class="data">
                <i class="icon score"
                :style="'background-image: url('+$qiniu.url+'assets/img/icon.png)'"></i>
                <p>得分/分</p>
                <p>{{weekly.totalScore == null ? 0 : weekly.totalScore}}</p>
            </div>
        </div>
        <section class="chart-wrapper">
            <div class="chart" v-if="weekly.chart!=null">
                <!--<line-chart  :data='datacollection' :options="options"></line-chart>-->
                <line-chart-e></line-chart-e>
            </div>
            <!-- <div class="commet">
                <p>点评：<span>{{weekly.reply == null ? '暂无评论' : weekly.reply}}</span></p>
            </div> -->
            <div class="chart" id="chart">
            </div>
        </section>
        <div class="title">— 各部位正确率 —</div>
        <!-- 各部位正确率 -->
        <div class="fit clearfix"
             :style="{backgroundImage: getUserInfo.sex == '女' ? 'url(' + $qiniu.url + 'assets/img/weekly-people.png)' : 'url(' + $qiniu.url + 'assets/img/weekly-people1.png)'}">
             <div class="left clearfix">
                <div class="left-arm item clearfix">
                    <h4>右臂</h4>
                    <p>正确率：<span :class="{ low : 'weekly.rate.rightArm < 60' }">{{weekly.rate == null ? 0 :( weekly.rate.rightArm>100 ? 100 : weekly.rate.rightArm)}}%</span></p>
                </div>
                <div class="body item clearfix">
                    <h4>身体</h4>
                    <p>正确率：<span :class="{ low : 'weekly.rate.body < 60' }">{{weekly.rate== null ? 0 : (weekly.rate.body > 100 ? 100 : weekly.rate.body)}}%</span></p>
                </div>
                <div class="left-leg item clearfix">
                    <h4>右腿</h4>
                    <p>正确率：<span :class="{ low : 'weekly.rate.rightLeg < 60' }">{{weekly.rate == null ? 0 : (weekly.rate.rightLeg >100 ? 100 : weekly.rate.rightLeg)}}%</span></p>
                </div>
            </div>
            <div class="right clearfix">
                <div class="right-arm item clearfix">
                    <h4>左臂</h4>
                    <p>正确率：<span :class="{ low : 'weekly.rate.leftArm < 60' }">{{weekly.rate == null ? 0 : (weekly.rate.leftArm > 100 ? 100 : weekly.rate.leftArm)}}%</span></p>
                </div>
                <div class="right-leg item clearfix">
                    <h4>左腿</h4>
                    <p>正确率：<span :class="{ low : 'weekly.rate.leftLeg < 60' }">{{weekly.rate == null ? 0 :(weekly.rate.leftLeg > 100 ? 100 : weekly.rate.leftLeg)}}%</span></p>
                </div>
            </div>
        </div>
    </section>
    <section class="comparison-wrapper" v-if="weekly !== null">
        <div class="title">— 对比上周 —</div>
        <div class="comparison clearfix">
            <div class="last week">
                <div class='lastdes'>上周课程数：<span>{{weekly.lastWeek == null ? 0 : weekly.lastWeek.fitNum}}节</span></div>
                <div class='lastdes'>上周总时间：<span>{{lastweek ? lastweek.totalTime : 0}}</span></div>
                <div class='lastdes'>上周总消耗：<span>{{weekly.lastWeek == null ? 0 :weekly.lastWeek.totalKcal}}千卡</span></div>
            </div>
            <!-- <div class="last week" v-else>
                <p>上周体重：0千克</p>
                <p>上周总时间：0小时</p>
                <p>上周正确率：0%</p>
            </div> -->
            <div class="this week" >
                <div class='thedes'>本周课程数: <span>{{weekly.theWeek == null ? 0 : weekly.theWeek.fitNum}}节</span></div>
                <div class='thedes'>本周总时间：<span>{{theweek ? theweek.totalTime : 0}}</span>
                    <i class="icon"
                     v-if="weekly.theWeek !== null && weekly.lastWeek !== null"
                    :style="'background-image: url('+$qiniu.url+'assets/img/icon.png)'"
                    :class="{ up: (weekly.lastWeek == null ? 0 :weekly.lastWeek.totalTime) < (weekly.theWeek == null ?0 :weekly.theWeek.totalTime) ,
                              down :(weekly.lastWeek == null ? 0 :weekly.lastWeek.totalTime) > (weekly.theWeek == null ?0 :weekly.theWeek.totalTime)}" >
                    </i>
                  </div>
                <div class='thedes'>本周总消耗：<span>{{weekly.theWeek.totalKcal == null ? 0 : weekly.theWeek.totalKcal}}千卡</span>
                    <i class="icon"
                    :style="'background-image: url('+$qiniu.url+'assets/img/icon.png)'"
                     v-if="weekly.theWeek !== null && weekly.lastWeek !== null"
                    :class="{ up: (weekly.lastWeek == null ? 0 :weekly.lastWeek.totalKcal) < (weekly.theWeek == null ?0 :weekly.theWeek.totalKcal) ,
                              down:(weekly.lastWeek == null ? 0 :weekly.lastWeek.totalKcal) > (weekly.theWeek == null ?0 :weekly.theWeek.totalKcal)}">
                    </i>
                  </div>
            </div>
        </div>
        <!-- <p><i class="icon flower"
        :style="'background-image: url('+$qiniu.url+'assets/img/icon.png)'"></i>真厉害！本周成绩出众，继续努力</p> -->
    </section>
</div>
</template>
<script>
    import LineChart from './LineChart';
    import LineChartE from './LineChart-e';
    import echarts from "echarts";
    import api from "../../api"
    import Loading from '../loading';
    import {
        refreshTitle,
        errFun,
    } from "../../tools.js"
    export default {
        components: {
            LineChart,
            Loading,
            LineChartE
        },
        data() {
            return {
                star: 0,
                theweek: null,
                lastweek: null,
                start: this.$route.query.start,
                end: this.$route.query.end
            }
        },
        created() {
            refreshTitle(this.$route.meta.title);
            this.$store.dispatch('GET_WEEKLY_BY', this.$route.params.id);
            this.$store.dispatch('GET_USER_INFO');
        },
        computed: {
            weekly: function() {
                return this.$store.state.weekly.weekly
            },
            getUserInfo() {
                return this.$store.state.user
            },
        },
        methods: {
            getStar() {
                var that = this;
                api.getWeeklyByid(that.$route.params.id).then(response => {
                    if (response.data.code == 100) {
                        that.delResult(response, that);
                    }
                })
            },
            delResult(result, that) {
                if (result.data.code == 100) {
                    result.data.result.star = result.data.result.star > 5 ? 5 : result.data.result.star;
                    that.star = result.data.result.star;
                    //  本周的时间
                    result.data.result.theWeek.totalTime = result.data.result.theWeek.totalTime > 3600 ?
                        (Math.round(result.data.result.theWeek.totalTime / 3600)) + '小时' : (Math.round(result.data.result.theWeek.totalTime / 60)) + '分钟';
                    that.theweek = result.data.result.theWeek;
                    // 上周的时间
                    result.data.result.lastWeek.totalTime = result.data.result.lastWeek.totalTime > 3600 ?
                        (Math.round(result.data.result.lastWeek.totalTime / 3600)) + '小时' : (Math.round(result.data.result.lastWeek.totalTime / 60)) + '分钟';
                    that.lastweek = result.data.result.lastWeek;
                    that.showstar(that);
                } else {
                    that.message = result.data.message;
                }
            },
            // 五角星的渲染
            showstar(that) {
                var star = document.querySelector("#star1");
                var shixin = star.querySelector(".shixin");
                var kongxin = star.querySelector(".kongxin");
                var wrapperstar = star.querySelector(".wrapperstar");
                var num = that.star ? that.star : 0;
                // console.log(kongxin);
                setTimeout(function() {
                    if (parseInt(num) === num) {
                        // 利用parseInt的转换判断是否是整数，
                        // 表示是整数
                        shixin.style.left = -(Math.floor(star.offsetWidth / 5) + 1) * (5 - num) + 'px';
                    } else if (parseInt(num) != num && parseInt(num) < 5 && parseInt(num) > 0) {
                        // 表示不是整数
                        shixin.style.left = -(Math.floor(star.offsetWidth / 5) + 1) * (5 - (parseInt(num) + 1)) + 'px';
                        wrapperstar.style.left = ((Math.floor(star.offsetWidth / 5) + 1) * ((parseInt(num))) + 14.5) + 'px'
                    } else {
                        return;
                    }
                }, 200);
            }
        },
        mounted() {
            this.$nextTick(function() {
                this.getStar(); // 仅仅只是为了获取星星的个数
            })
        },
    }
</script>
<style>
    #weekly {
        color: #feb902;
        box-sizing: border-box;
        font-size: 14px;
        .date {
            text-align: center;
            margin-top: 20px;
            display: block;
            width: 50%;
            margin-left: 25%;
            height: 40px;
            background-color: #feb902;
            color: #000;
            text-align: center;
            line-height: 40px;
            font-size: 13px;
        }
        .title {
            color: #fff;
            text-align: center;
            margin-top: 5%;
            margin-bottom: 5%;
        }
        .icon {
            display: inline-block;
        }
        .weekly-star {
            display: inline-block;
            background-size: 100%;
            background-repeat: no-repeat;
            width: 20px;
            height: 20px;
            margin: 2%;
        }
        /*星星的等级*/
        .star-wrapper {
            padding: 1rem;
            text-align: center;
            /*margin-bottom: 0.3rem;*/
            .star {
                padding: 1rem;
                border: 0.5px solid #feb902;
                font-weight: 100;
                color: #feb902;
            }
            #star1 {
                width: 147px;
                height: 40px;
                margin: auto;
                position: relative;
                overflow: hidden;
                i {
                    width: 100%;
                    height: 100%;
                    display: block;
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-origin: content-box;
                }
                .wrapperstar {
                    width: 15px;
                    height: 40px;
                    background-color: #161616;
                    position: absolute;
                    top: 0px;
                    left: -40px;
                }
                .shixin,
                .kongxin {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                }
                .shixin {
                    left: -150px;
                }
                .kongxin {
                    z-index: 999;
                }
            }
        }
        /*健身数据*/
        .fit-wrapper {
            padding: 1rem;
            /*margin-bottom: 0.3rem;*/
            .fit-data {
                padding: 1rem;
                border: 0.5px solid #feb902;
                text-align: center;
                box-sizing: border-box;
                .data {
                    width: 49%;
                    float: left;
                    display: inline-block;
                    margin: 1rem 0;
                }
                .data:first-child {
                    border-right: 0.5px solid #feb902;
                }
                .data:last-child {
                    font-size: 16px;
                }
                .kcal {
                    background-position: -248px 0;
                    width: 40px;
                    height: 40px;
                    transform: scale(0.8, 0.8);
                    -webkit-transform: scale(0.8, 0.8);
                }
                .score {
                    background-position: -282px 0;
                    width: 40px;
                    height: 40px;
                    transform: scale(0.8, 0.8);
                    -webkit-transform: scale(0.8, 0.8);
                }
            }
            .fit {
                background-position: center center;
                background-size: 60%;
                background-repeat: no-repeat;
                height: 20rem;
                position: relative;
                .item {
                    width: 5.7rem;
                    height: 2.2rem;
                    /*color: #ccc;*/
                    padding: 0.5rem;
                    border: 1px solid #feb902;
                    background-color: #161616;
                    h4 {
                        font-weight: 400;
                    }
                    p {
                        font-size: 12px;
                        .low {
                            color: #e1316f;
                        }
                        span {
                            font-size: 14px;
                            color: #00BA9B;
                        }
                    }
                }
                .left {
                    float: left;
                    .left-arm {
                        position: absolute;
                        top: 2rem;
                        left: 0.5rem;
                    }
                    .body {
                        position: absolute;
                        top: 7.2rem;
                        left: 0rem;
                    }
                    .left-leg {
                        position: absolute;
                        left: 0.5rem;
                        top: 14rem;
                    }
                }
                .right {
                    float: right;
                    .right-arm {
                        position: absolute;
                        right: 0rem;
                        top: 2rem;
                    }
                    .right-leg {
                        position: absolute;
                        right: 0rem;
                        top: 13rem;
                    }
                }
            }
        }
        /*表格*/
        .chart-wrapper {
            padding: 1rem;
            margin-bottom: 0.3rem;
            .chart {
                width: 100%;
                margin-bottom: -40px;
                margin-top: 30px;
            }
            /*.commet {
            padding: 1rem;
            border: 0.5px solid #feb902;
            font-weight: 100;
        }*/
        }
        /*对比上周*/
        .comparison-wrapper {
            padding: 1rem;
            text-align: center;
            margin-bottom: 0.3rem;
            margin-top: -1rem;
            /*font-size: 0.7rem;*/
            .comparison {
                width: 100%;
                padding: 10px;
                box-sizing: border-box;
                .week {
                    float: left;
                    box-sizing: border-box;
                    font-size: 14px;
                    width: 50%;
                    color: #cc9507;
                    position: relative;
                }
                .last {
                    .lastdes {
                        width: 100%;
                        padding-bottom: 10px;
                        padding-left: 15%;
                        box-sizing: border-box;
                        text-align: left;
                    }
                }
                .this {
                    .thedes {
                        width: 100%;
                        padding-bottom: 10px;
                        padding-left: 15%;
                        box-sizing: border-box;
                        text-align: left;
                        position: relative;
                    }
                    .up {
                        background-position: -130px -10px;
                        width: 30px;
                        height: 30px;
                        transform: scale(0.6, 0.6);
                        -webkit-transform: scale(0.6, 0.6);
                        position: absolute;
                        top: -40%;
                        right: -4%;
                    }
                    .down {
                        background-position: -155px -10px;
                        width: 30px;
                        height: 30px;
                        transform: scale(0.6, 0.6);
                        -webkit-transform: scale(0.6, 0.6);
                        margin-left: -0.5rem;
                        margin-bottom: -1rem;
                    }
                }
                .week:first-child {
                    border-right: 0.5px solid #feb902;
                }
            }
            .flower {
                background-position: -200px 0;
                width: 40px;
                height: 40px;
                transform: scale(0.6, 0.6);
                -webkit-transform: scale(0.6, 0.6);
                margin-bottom: -0.7rem;
            }
        }
    }
</style>